<template>
	<view>
		<view class="index-notice">
			<view class="iconfont iconxiaoxi"></view>
				<scroll-view class="index-notice-content">
								<swiper v-if="show" class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
									<swiper-item v-for="(item, index) in list" :key="index" class="an-notice-content-item">
										<view class="swiper-item">
											<view style="width: 85%;">{{item}}</view>
										</view>
									</swiper-item>
								</swiper>
							</scroll-view>
				</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcons
		},
		props:{
			message_list:{},
			color: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: this.message_list,
				copyText: '',
				show: '',
			};
		},
		mounted() {
			this.show = true;
		},
		watch: {
			message_list(){
				this.list=this.message_list
			}
		},
		methods: {
			more(){
				this.show = false;
				this.$emit('more')
			}
		}
	}
</script>

<style>
	.swiper{
		height: 60upx!important;
	}
	.an-notice-box{
		background: #fff;
		width: 100%;
		padding: 6px 12px;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}
	.an-notice-box .an-notice-l{
		display: flex;
		align-items: center;
	}
	.an-notice-box .icon-tongzhi{
		color: #fdd100;
		font-size: 20px;
		margin-top: -1px;
		margin-right: 2px;
	}
	.an-notice-box .an-notice-l-title {
		font-size: 17px;
		color: #fdd100;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 2px;
	}
	.an-notice-icon{
		width: 60upx;
		height: 60upx;
		line-height: 50upx;
		text-align: center;
		position: relative;
	}
	.an-notice-content{
		width: calc(100% - 220upx);
		position: relative;
		font-size: 14px;
		padding-left: 6px;
		flex: 1;
	}
	.an-notice-content-item{
		width: 100%;
		height: 60upx;
		text-align: left;
		line-height: 60upx;
	}
	.an-notice-content-item-text{
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.an-notice-more {
		font-size: 13px;
		color: #b7b7b7;
		text-align: center;
		display: flex;
		align-items: center;
	}
	.an-notice-more-l{
		text-decoration: underline;
		margin-right: 3px;
	}
	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>
